<template>
  <div ref="$app" class="edit-screens" @scroll="handleScroll">
    <div ref="$container" class="edit-screen-container">
      <div ref="refSketchRuleBox" class="canvas" @click="handleOtherStop">
        <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditScreens',
  data () {
    return {
      width: '',
      isPressSpace: false
    }
  },
  methods: {
    handleScroll () {
      const $app = this.$refs.$app
      const refSketchRuleBox = this.$refs.refSketchRuleBox
      if (!$app) return
      const screensRect = $app.getBoundingClientRect()
      const canvasRect = refSketchRuleBox.getBoundingClientRect()
      const perspectiveX = screensRect.left - canvasRect.left
      const perspectiveY = screensRect.top - canvasRect.top
      this.$emit('handleScroll', { perspectiveX, perspectiveY })
    },
    handleOtherStop () {
      this.$emit('handleOtherStop')
    }
  }
}
</script>

<style lang="less" scoped>
.edit-screens {
  position: relative;
  margin: 24px 0 0 24px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  overflow: auto;
  user-select: none;
  .edit-screen-container {
    position: absolute;
    width: 100%;
    height: 100%;
    .canvas {
      width: 100%;
      height: 100%;
    }
  }
}
</style>